<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title></title>
<link rel="stylesheet" href="../layui/css/layui.css">
<link rel="stylesheet" href="../css/general.css">
<link rel="stylesheet" href="../css/staff/index.css">
</head>
<body class="layui-layout-body">
<div id="staff-role" class="layui-layout layui-layout-admin">
	<div class="layui-header">
		<div class="layui-logo"><img src="../img/common/logo.jpg" alt=""></div>
		<!-- 头部区域（可配合layui已有的水平导航） -->
		<h1>魔力公寓</h1>
		<ul class="layui-nav layui-layout-right">
			<li class="layui-nav-item"> <a href="javascript:;">{{userinfo.loginName}}<img src="../img/common/icon07.gif" class="layui-nav-img"></a>
				<dl class="layui-nav-child">
					<dd><a href="../staff/modify_password.html"><img src="../img/common/icon08.png" alt=""><span>修改密码</span></a></dd>
					<dd><a href="../staff/bank_card.html"><img src="../img/common/icon09.png" alt=""><span>银行卡信息</span></a></dd>
					<dd><a href="javascript:;" @click.stop="doLogout"><img src="../img/common/icon10.png" alt=""><span>安全退出</span></a></dd>
				</dl>
			</li>
		</ul>
	</div>
	<div class="layui-side layui-bg-black">
		<div class="layui-side-scroll"> 
			<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
			<ul class="layui-nav layui-nav-tree"  lay-filter="test">
				<li class="layui-nav-item"><a href="../survey/index.html"><img src="../img/common/icon01.png" alt="">概况</a></li>
				<li class="layui-nav-item"><a href="../rental/index.html"><img src="../img/common/icon02.png" alt="">租务</a></li>
				<li class="layui-nav-item"><a href="../financial_affairs/index.html"><img src="../img/common/icon03.png" alt="">财务</a></li>
				<li class="layui-nav-item"><a href="../reports/index.html"><img src="../img/common/icon04.png" alt="">报表</a></li>
				<li class="layui-nav-item"><a href="../separate_accounts/index.html"><img src="../img/common/icon05.png" alt="">分账</a></li>
				<li class="layui-nav-item on"><a href="../staff/index.html"><img src="../img/common/icon06.png" alt="">员工</a></li>
			</ul>
		</div>
	</div>
	<div class="layui-body"> 
		<!-- 内容主体区域 -->
		<div class="leftContent">
			<p class="layui-title">员工管理</p>
			<ul class="layui-menu">
				<li><a href="index.html">员工管理</a></li>
				<li><a href="role.html" class="on">角色管理</a></li>
			</ul>
		</div>
		<div class="rightContent">
			<div class="section">
				<div class="add"><a href="javascript:;" @click="openAdd" class="layui-btn">新建角色</a></div>
				<table class="layui-table" lay-even>
					<colgroup>
					<col width="7%">
					<col width="80%">
					<col width="13%">
					</colgroup>
					<thead>
						<tr>
							<th>角色名称</th>
							<th>添加时间</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody v-if="roleList.length>0">
						<tr v-for="r in roleList">
							<td v-text="r.roleName">管家</td>
							<td v-text="r.createTime">2018.02.22  15:34:34</td>
							<td><a href="javascript:;" @click="openEdit(r)" class="layui-btn">编辑</a></td>
						</tr>
					</tbody>
				</table>
				<div v-if="roleList.length==0" class="nothing-box">暂无角色管理信息</div>
				<div v-show="isShowAdd" class="character increase">
					<div class="close"><img @click="isShowAdd=!isShowAdd" src="../img/common/close_img.gif" alt=""></div>
					<p class="headline">添加角色</p>
					<form class="layui-form" action="">
						<div class="role-box clearfix">
							<p class="role-title">角色名称</p>
							<div class="layui-input-inline">
								<input @focus="changeStatus(['roleNameClassObj'], 'isActive')"
									   @blur="changeStatus(['roleNameClassObj'], 'isFinish')" :class="status.roleNameClassObj"
										type="text" v-model.trim="role.roleName" placeholder="请输入角色名称" autocomplete="off" class="layui-input">
							</div>
						</div>
						<ul class="features clearfix">
							<li>
								<button @click.prevent="checkAll" class="layui-btn">全选</button>
							</li>
							<li>
								<button @click.prevent="checkNone" class="layui-btn">全不选</button>
							</li>
						</ul>
						<dl class="role-detail">
							<template v-for="a in accessList">
							<dt v-text="a.name"></dt>
							<template v-for="c in a.child">
							<dd :class="{ddStyle:c.child.length>0}">
								<ul class="clearfix">
								<template v-if="c.child.length>0">
									<li class="liStyle" v-text="c.name">房源管理</li>
									<li v-for="cc in c.child">
										<input type="checkbox" :value="cc.id" v-model="role.accessId" :title="cc.name" lay-skin="primary">
									</li>
								</template>
								<template v-else>
									<li>
										<input type="checkbox" :value="c.id" v-model="role.accessId" :title="c.name" lay-skin="primary">
									</li>
								</template>
								</ul>
							</dd>
							</template>
							</template>
						</dl>
						<ul class="submit">
							<li>
								<button @click.prevent="addRole" class="layui-btn layui-btn-primary" lay-submit lay-filter="formDemo">确定</button>
							</li>
						</ul>
					</form>
				</div>
				<div v-show="isShowEdit" class="character edit">
					<div class="close"><img @click="isShowEdit=!isShowEdit" src="../img/common/close_img.gif" alt=""></div>
					<p class="headline">编辑角色</p>
					<form class="layui-form" action="">
						<div class="role-box clearfix">
							<p class="role-title">角色名称</p>
							<div class="layui-input-inline">
								<input @focus="changeStatus(['roleNameClassObj'], 'isActive')"
									   @blur="changeStatus(['roleNameClassObj'], 'isFinish')" :class="status.roleNameClassObj"
									   type="text" v-model.trim="role.roleName" placeholder="请输入角色名称" autocomplete="off" class="layui-input">
							</div>
						</div>
						<ul class="features clearfix">
							<li>
								<button @click.prevent="checkAll" class="layui-btn">全选</button>
							</li>
							<li>
								<button @click.prevent="checkNone" class="layui-btn">全不选</button>
							</li>
						</ul>
						<dl class="role-detail">
							<template v-for="a in accessList">
							<dt v-text="a.name"></dt>
							<template v-for="c in a.child">
							<dd :class="{ddStyle:c.child.length>0}">
								<ul class="clearfix">
									<template v-if="c.child.length>0">
										<li class="liStyle" v-text="c.name">房源管理</li>
										<li v-for="cc in c.child">
											<input type="checkbox" :value="cc.id" v-model="role.accessId" :title="cc.name" lay-skin="primary">
										</li>
									</template>
									<template v-else>
										<li>
											<input type="checkbox" :value="c.id" v-model="role.accessId" :title="c.name" lay-skin="primary">
										</li>
									</template>
								</ul>
							</dd>
							</template>
							</template>
						</dl>
						<ul class="submit">
							<li>
								<button @click.prevent="editRole" class="layui-btn layui-btn-primary" >确定</button>
							</li>
						</ul>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
<script src="../layui/layui.js"></script>
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/moment.min.js"></script>
<script src="../js/storejson2.min.js"></script>
<script src="../js/mock.js"></script>
<script src="../js/mockdata.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/vue.global.js"></script>
<script src="../js/staff/role.js"></script>
<!--<script>
//JavaScript代码区域
layui.use('element', function(){
  var element = layui.element;
  
});


//Demo
layui.use('form', function(){
  var form = layui.form;
  
  //监听提交
  form.on('submit(formDemo)', function(data){
    layer.msg(JSON.stringify(data.field));
    return false;
  });
});

</script>-->
</body>
</html>